export function useTable() {
    const gridOptions = reactive<any>({
        border: false,
        columnConfig: {
            resizable: true,
        },
        columns: [
            // { field: 'id', title: '序号', width: 100 },
            { title: '序号', type: 'seq', width: 50 },
            { field: 'area', slots: { default: 'area' }, title: '负责区域', width: 300 },
            { field: 'createTime', slots: { default: 'createTime' }, title: '添加时间' },
        ],
        data: [],
        editConfig: {
            mode: 'row',
            showStatus: true,
            trigger: 'manual',
        },
        height: 240,
        keepSource: true,
        loading: false,
        showOverflow: true,
        stripe: true,
    })

    const appGridOptions = reactive<any>({
        border: false,
        columnConfig: {
            resizable: true,
        },
        columns: [
            // { field: 'cardId', title: '序号', width: 100 },
            { title: '序号', type: 'seq', width: 50 },
            { field: 'cardName', title: '开通应用App', width: 300 },
            { field: 'updateTime', title: '添加时间' },
        ],
        data: [],
        editConfig: {
            mode: 'row',
            showStatus: true,
            trigger: 'manual',
        },
        height: 240,
        keepSource: true,
        loading: false,
        showOverflow: true,
        stripe: true,
    })

    const toggleGridOptions = (type = 'area') => {
        const newColumns = [...gridOptions.columns]
        if (type === 'area') {
            newColumns[1] = { field: 'enterpriseName', title: '负责区域', width: 300 }
        }
        else {
            newColumns[1] = { field: 'appName', title: '开通应用App', width: 300 }
        }
        gridOptions.columns = newColumns
    }

    return { gridOptions, appGridOptions, toggleGridOptions }
}
